<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>侦听器</title>
	<script src="js/vue.js"></script>
</head>
<body>
		
<div id="app">
	名字1：<input v-model="name1" type="text">
	名字2：<input v-model="name2" type="text">
	<h3>{{name12}}</h3>
	<h3>count值：{{count}}</h3>
</div>

</body>
<script>
let vm = new Vue({
	el:'#app',
	data: {
		name1:'Tom',
		name2:'Jek',
		count:7
	},
	computed:{
		name12:function(){
			return this.name1 + ',' + this.name2;
		}
	},
	watch:{
		name1:function(){
			this.count++
		},
		name2:function(){
			this.count++
		},
		count:function(){
			console.log(this.count);
		},
		name12:function(){
			//也可以侦听计算属性的变化：
			console.log("侦听计算属性的变化：" + this.name12);
		}
	}
})
</script>
</html>
